<template>
  <div>
      <Button type="primary" @click="addData">添加用户</Button>
      <Button type="primary" @click="alldeletd">删除选中</Button>
      <Input v-model="filter.name">
        <Button slot="append" icon="ios-search" @click="search"></Button>
      </Input>
     <Table border ref="selection" @on-selection-change="allNode" :columns="columns1" :data="list"></Table>
     <Page :total="filter.total" show-elevator show-total size="small"  show-sizer :page-size-opts="[2,4,8,10]" @on-page-size-change="changePageSize" :page-size="2" @on-change="changePage" ></Page>
     <Modal
        v-model="modal1"
        title="普通的Modal对话框标题"
        @on-ok="ok"
        @on-cancel="cancel">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="姓名" prop="name">
            <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
        </FormItem>
        <FormItem label="密码" prop="password">
            <Input id="password" v-model="formValidate.password" placeholder="请输入密码"></Input>
        </FormItem>
      
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')" to='/user'>提交</Button>
            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
        </FormItem>
    </Form>
    </Modal>
  </div>
</template>

<script>
import Base from '../../common/base.js';
//import md5 from 'crypto-js/sha256';
 export default {
        mixins:[Base],
        data () {
            return {
                module:'users',
                columns1: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '姓名',
                        key: 'name'
                    },
                    {
                        title: '密码',
                        key: 'password'
                    },
                   
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on:{
                                      click:()=>{
                                        this.deleteData(params.row._id);
                                      }
                                    }
                                }, '删除'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on:{
                                      click:()=>{
                                        this.editData(params.row._id);
                                        console.log(params.row._id);
                                      }
                                    }
                                }, '编辑')
                            ]);
                        }
                    }
                ],
                id:'',
                formValidate: {
                    name: '',
                    password:'',
                    email: '',
                    desc: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' }
                    ],
                   
                }
              }
        },
        methods:{
         
          ok () {
              this.getData();
              this.$Message.info('点击了确定');
          },
          cancel () {
            this.getData();
            this.$Message.info('点击了取消');
          },
          handleSubmit (name) {
              this.$refs[name].validate((valid) => {
                  if (valid) {
                       var url='';
                       if(this.id){
                          url='http://localhost:3000/users/data/'+this.id;
                       }else{
                        url='http://localhost:3000/users/data';
                       }
                       this.$http({
                          method:'POST',
                          url: url,
                          data:this.formValidate
                        }).then(response=>{
                          console.log(response.data);
                        })
                      this.$Message.success('提交成功!');
                  } else {
                      this.$Message.error('表单验证失败!');
                  }
              })
          },
          handleReset (name) {
              this.$refs[name].resetFields();
          },
          created(){
            if(getCookie('userId')){

            }
          }
        }
    }
</script>

<style>

</style>